<!-- input 测试组件 -->
<template>
    <input 
      class="primary"
      type="text"
      @input="onInput"
      :placeholder="placeholder"
    >
  <!-- $attrs是vue内置属性用来存储外部传向一个组件但没有被props接收的属性。 -->
</template>
<script>
export default {
  name:"zInput",
  props:{
    placeholder:String,
    prop:String
  },
  components: {},
  data() {
    return {
    };
  },
  inject:['customForm'],
  methods: {
    onInput(e){
      this.$emit('input',e.target.value);
    },
  }
}
</script>
<style scoped>
.primary{
  width: 90%;
  margin: 10px auto;
  height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.primary:focus{
  outline:none;
  border-radius: 5px;
  box-shadow: 0 0 0 1px cornflowerblue;
  /* 这是火狐私有属性 所以只能用 box-shadow 模拟出 ontline 的圆角 */
  /* -moz-outline-radius: 5px;  */
}
</style>